<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Java">
    <meta name="description" content="学习记录">
    <meta name="author" content="Carry灭霸">
    
    <title>
        
            Vue基础 |
        
        Carry
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN","path":"search.xml"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.svg","favicon":"/images/logo.svg","article_img_align":"center","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Hello World!"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":true}}},"local_search":{"enable":true,"preload":true},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Carry
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">Vue基础</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.svg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Carry灭霸</span>
                        
                            <span class="author-label">Lv4</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2021-09-01 00:00:00
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Vue/">Vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/Vue/">Vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="Vue基础"><a href="#Vue基础" class="headerlink" title="Vue基础"></a>Vue基础</h1><h3 id="1-hello-world"><a href="#1-hello-world" class="headerlink" title="1.hello world"></a>1.hello world</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>初识Vue<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			初识Vue：</span></span><br><span class="line"><span class="comment">				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；</span></span><br><span class="line"><span class="comment">				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；</span></span><br><span class="line"><span class="comment">				3.root容器里的代码被称为【Vue模板】；</span></span><br><span class="line"><span class="comment">				4.Vue实例和容器是一一对应的；</span></span><br><span class="line"><span class="comment">				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；</span></span><br><span class="line"><span class="comment">				6.&#123;&#123;xxx&#125;&#125;中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；</span></span><br><span class="line"><span class="comment">				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				注意区分：js表达式 和 js代码(语句)</span></span><br><span class="line"><span class="comment">						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：</span></span><br><span class="line"><span class="comment">									(1). a</span></span><br><span class="line"><span class="comment">									(2). a+b</span></span><br><span class="line"><span class="comment">									(3). demo(1)</span></span><br><span class="line"><span class="comment">									(4). x === y ? &#x27;a&#x27; : &#x27;b&#x27;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">						2.js代码(语句)</span></span><br><span class="line"><span class="comment">									(1). if()&#123;&#125;</span></span><br><span class="line"><span class="comment">									(2). for()&#123;&#125;</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello，&#123;&#123;name.toUpperCase()&#125;&#125;，&#123;&#123;address&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> &gt;</span></span><br><span class="line"><span class="javascript">			Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//创建Vue实例</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#demo&#x27;</span>, <span class="comment">//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。</span></span></span><br><span class="line"><span class="javascript">				data:&#123; <span class="comment">//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。</span></span></span><br><span class="line"><span class="javascript">					name:<span class="string">&#x27;atguigu&#x27;</span>,</span></span><br><span class="line"><span class="javascript">					address:<span class="string">&#x27;北京&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-模板语法"><a href="#2-模板语法" class="headerlink" title="2.模板语法"></a>2.模板语法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>模板语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				Vue模板语法有2大类：</span></span><br><span class="line"><span class="comment">					1.插值语法：</span></span><br><span class="line"><span class="comment">							功能：用于解析标签体内容。</span></span><br><span class="line"><span class="comment">							写法：&#123;&#123;xxx&#125;&#125;，xxx是js表达式，且可以直接读取到data中的所有属性。</span></span><br><span class="line"><span class="comment">					2.指令语法：</span></span><br><span class="line"><span class="comment">							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。</span></span><br><span class="line"><span class="comment">							举例：v-bind:href=&quot;xxx&quot; 或  简写为 :href=&quot;xxx&quot;，xxx同样要写js表达式，</span></span><br><span class="line"><span class="comment">									 且可以直接读取到data中的所有属性。</span></span><br><span class="line"><span class="comment">							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>插值语法<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>你好，&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">hr</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>指令语法<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">&quot;school.url.toUpperCase()&quot;</span> <span class="attr">x</span>=<span class="string">&quot;hello&quot;</span>&gt;</span>点我去&#123;&#123;school.name&#125;&#125;学习1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">&quot;school.url&quot;</span> <span class="attr">x</span>=<span class="string">&quot;hello&quot;</span>&gt;</span>点我去&#123;&#123;school.name&#125;&#125;学习2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;jack&#x27;</span>,</span></span><br><span class="line">				school:&#123;</span><br><span class="line"><span class="javascript">					name:<span class="string">&#x27;尚硅谷&#x27;</span>,</span></span><br><span class="line"><span class="javascript">					url:<span class="string">&#x27;http://www.atguigu.com&#x27;</span>,</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-数据绑定"><a href="#3-数据绑定" class="headerlink" title="3.数据绑定"></a>3.数据绑定</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>数据绑定<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			Vue中有2种数据绑定的方式：</span></span><br><span class="line"><span class="comment">					1.单向绑定(v-bind)：数据只能从data流向页面。</span></span><br><span class="line"><span class="comment">					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。</span></span><br><span class="line"><span class="comment">						备注：</span></span><br><span class="line"><span class="comment">								1.双向绑定一般都应用在表单类元素上（如：input、select等）</span></span><br><span class="line"><span class="comment">								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 普通写法 --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 单向数据绑定：&lt;input type=&quot;text&quot; v-bind:value=&quot;name&quot;&gt;&lt;br/&gt;</span></span><br><span class="line"><span class="comment">			双向数据绑定：&lt;input type=&quot;text&quot; v-model:value=&quot;name&quot;&gt;&lt;br/&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 简写 --&gt;</span></span><br><span class="line">			单向数据绑定：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">:value</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			双向数据绑定：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h2 v-model:x=&quot;name&quot;&gt;你好啊&lt;/h2&gt; --&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-挂载-mount和data函数式"><a href="#4-挂载-mount和data函数式" class="headerlink" title="4.挂载$mount和data函数式"></a>4.挂载$mount和data函数式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>el与data的两种写法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			data与el的2种写法</span></span><br><span class="line"><span class="comment">					1.el有2种写法</span></span><br><span class="line"><span class="comment">									(1).new Vue时候配置el属性。</span></span><br><span class="line"><span class="comment">									(2).先创建Vue实例，随后再通过vm.$mount(&#x27;#root&#x27;)指定el的值。</span></span><br><span class="line"><span class="comment">					2.data有2种写法</span></span><br><span class="line"><span class="comment">									(1).对象式</span></span><br><span class="line"><span class="comment">									(2).函数式</span></span><br><span class="line"><span class="comment">									如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。</span></span><br><span class="line"><span class="comment">					3.一个重要的原则：</span></span><br><span class="line"><span class="comment">									由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好，&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="comment">//el的两种写法</span></span></span><br><span class="line">		/* const v = new Vue(&#123;</span><br><span class="line"><span class="javascript">			<span class="comment">//el:&#x27;#root&#x27;, //第一种写法</span></span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line"><span class="javascript">		<span class="built_in">console</span>.log(v)</span></span><br><span class="line"><span class="javascript">		v.$mount(<span class="string">&#x27;#root&#x27;</span>) <span class="comment">//第二种写法 */</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="comment">//data的两种写法</span></span></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="javascript">			<span class="comment">//data的第一种写法：对象式</span></span></span><br><span class="line">			/* data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">			&#125; */</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//data的第二种写法：函数式</span></span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;@@@&#x27;</span>,<span class="built_in">this</span>) <span class="comment">//此处的this是Vue实例对象</span></span></span><br><span class="line"><span class="javascript">				<span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="javascript">					name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="5-理解MVVM"><a href="#5-理解MVVM" class="headerlink" title="5.理解MVVM"></a>5.理解MVVM</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>理解MVVM<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			MVVM模型</span></span><br><span class="line"><span class="comment">						1. M：模型(Model) ：data中的数据</span></span><br><span class="line"><span class="comment">						2. V：视图(View) ：模板代码</span></span><br><span class="line"><span class="comment">						3. VM：视图模型(ViewModel)：Vue实例</span></span><br><span class="line"><span class="comment">			观察发现：</span></span><br><span class="line"><span class="comment">						1.data中所有的属性，最后都出现在了vm身上。</span></span><br><span class="line"><span class="comment">						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>学校名称：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>学校地址：&#123;&#123;address&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h1&gt;测试一下1：&#123;&#123;1+1&#125;&#125;&lt;/h1&gt;</span></span><br><span class="line"><span class="comment">			&lt;h1&gt;测试一下2：&#123;&#123;$options&#125;&#125;&lt;/h1&gt;</span></span><br><span class="line"><span class="comment">			&lt;h1&gt;测试一下3：&#123;&#123;$emit&#125;&#125;&lt;/h1&gt;</span></span><br><span class="line"><span class="comment">			&lt;h1&gt;测试一下4：&#123;&#123;_c&#125;&#125;&lt;/h1&gt; --&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				address:<span class="string">&#x27;北京&#x27;</span>,</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line"><span class="javascript">		<span class="built_in">console</span>.log(vm)</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="6-数据代理"><a href="#6-数据代理" class="headerlink" title="6.数据代理"></a>6.数据代理</h3><h4 id="6-1Object-defineproperty方法"><a href="#6-1Object-defineproperty方法" class="headerlink" title="6.1Object.defineproperty方法"></a>6.1Object.defineproperty方法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>回顾Object.defineproperty方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> &gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">let</span> number = <span class="number">18</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;张三&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				sex:<span class="string">&#x27;男&#x27;</span>,</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//defineProperty的value默认不可枚举，即不可遍历</span></span></span><br><span class="line"><span class="javascript">			<span class="built_in">Object</span>.defineProperty(person,<span class="string">&#x27;age&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">// value:18,</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">// enumerable:true, //控制属性是否可以枚举，默认值是false</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">// writable:true, //控制属性是否可以被修改，默认值是false</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">// configurable:true //控制属性是否可以被删除，默认值是false</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">				<span class="comment">//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值</span></span></span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;有人读取age属性了&#x27;</span>)</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> number</span></span><br><span class="line">				&#125;,</span><br><span class="line"></span><br><span class="line"><span class="javascript">				<span class="comment">//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值</span></span></span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">set</span>(<span class="params">value</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;有人修改了age属性，且值是&#x27;</span>,value)</span></span><br><span class="line">					number = value</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line">			&#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">// console.log(Object.keys(person))</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(person)</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="6-2数据代理"><a href="#6-2数据代理" class="headerlink" title="6.2数据代理"></a>6.2数据代理</h4><ol>
<li>Vue中的数据代理：</li>
</ol>
<p>​              通过vm对象来代理data对象中属性的操作（读/写）</p>
<ol start="2">
<li>Vue中数据代理的好处：</li>
</ol>
<p>​              更加方便的操作data中的数据</p>
<ol start="3">
<li>基本原理：</li>
</ol>
<p>​              通过Object.defineProperty()把data对象中所有属性添加到vm上。</p>
<p>​              为每一个添加到vm上的属性，都指定一个getter/setter。</p>
<p>​              在getter/setter内部去操作（读/写）data中对应的属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>何为数据代理<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> &gt;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">let</span> obj = &#123;<span class="attr">x</span>:<span class="number">100</span>&#125;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">let</span> obj2 = &#123;<span class="attr">y</span>:<span class="number">200</span>&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//通过obj2代理obj</span></span></span><br><span class="line"><span class="javascript">			<span class="built_in">Object</span>.defineProperty(obj2,<span class="string">&#x27;x&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> obj.x</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">set</span>(<span class="params">value</span>)</span>&#123;</span></span><br><span class="line">					obj.x = value</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-事件处理"><a href="#7-事件处理" class="headerlink" title="7.事件处理"></a>7.事件处理</h3><h4 id="7-1基本使用"><a href="#7-1基本使用" class="headerlink" title="7.1基本使用"></a>7.1基本使用</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>事件的基本使用<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				事件的基本使用：</span></span><br><span class="line"><span class="comment">							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；</span></span><br><span class="line"><span class="comment">							2.事件的回调需要配置在methods对象中，最终会在vm上；</span></span><br><span class="line"><span class="comment">							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；</span></span><br><span class="line"><span class="comment">							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；</span></span><br><span class="line"><span class="comment">							5.@click=&quot;demo&quot; 和 @click=&quot;demo($event)&quot; 效果一致，但后者可以传参；</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>欢迎来到&#123;&#123;name&#125;&#125;学习<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;button v-on:click=&quot;showInfo&quot;&gt;点我提示信息&lt;/button&gt; --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo1&quot;</span>&gt;</span>点我提示信息1（不传参）<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo2($event,66)&quot;</span>&gt;</span>点我提示信息2（传参）<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span>,</span></span><br><span class="line">			&#125;,</span><br><span class="line">			methods:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">showInfo1</span>(<span class="params">event</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(event.target.innerText)</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(this) //此处的this是vm</span></span></span><br><span class="line"><span class="javascript">					alert(<span class="string">&#x27;同学你好！&#x27;</span>)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">showInfo2</span>(<span class="params">event,number</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(event,number)</span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(event.target.innerText)</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(this) //此处的this是vm</span></span></span><br><span class="line"><span class="javascript">					alert(<span class="string">&#x27;同学你好！！&#x27;</span>)</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="7-2事件修饰符"><a href="#7-2事件修饰符" class="headerlink" title="7.2事件修饰符"></a>7.2事件修饰符</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>事件修饰符<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">			*&#123;</span><br><span class="line"><span class="css">				<span class="attribute">margin-top</span>: <span class="number">20px</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.demo1&#123;</span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.box1&#123;</span><br><span class="line"><span class="css">				<span class="attribute">padding</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.box2&#123;</span><br><span class="line"><span class="css">				<span class="attribute">padding</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: orange;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.list&#123;</span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: peru;</span></span><br><span class="line"><span class="css">				<span class="attribute">overflow</span>: auto;</span></span><br><span class="line">			&#125;</span><br><span class="line"><span class="css">			<span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				Vue中的事件修饰符：</span></span><br><span class="line"><span class="comment">						1.prevent：阻止默认事件（常用）；</span></span><br><span class="line"><span class="comment">						2.stop：阻止事件冒泡（常用）；</span></span><br><span class="line"><span class="comment">						3.once：事件只触发一次（常用）；</span></span><br><span class="line"><span class="comment">						4.capture：使用事件的捕获模式；</span></span><br><span class="line"><span class="comment">						5.self：只有event.target是当前操作的元素时才触发事件；</span></span><br><span class="line"><span class="comment">						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>欢迎来到&#123;&#123;name&#125;&#125;学习<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 阻止默认事件（常用） --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.atguigu.com&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>点我提示信息<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 阻止事件冒泡（常用） --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo1&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>点我提示信息<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">				<span class="comment">&lt;!-- 修饰符可以连续写 --&gt;</span></span><br><span class="line">				<span class="comment">&lt;!-- &lt;a href=&quot;http://www.atguigu.com&quot; @click.prevent.stop=&quot;showInfo&quot;&gt;点我提示信息&lt;/a&gt; --&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 事件只触发一次（常用） --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.once</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>点我提示信息<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 使用事件的捕获模式 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span> @<span class="attr">click.capture</span>=<span class="string">&quot;showMsg(1)&quot;</span>&gt;</span></span><br><span class="line">				div1</span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;showMsg(2)&quot;</span>&gt;</span></span><br><span class="line">					div2</span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 只有event.target是当前操作的元素时才触发事件； --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo1&quot;</span> @<span class="attr">click.self</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>点我提示信息<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- passive 事件的默认行为立即执行，无需等待事件回调执行完毕；</span></span><br><span class="line"><span class="comment">				 @wheel滚轮滚动事件</span></span><br><span class="line"><span class="comment">				 @scorll滚动条滚动事件--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span> @<span class="attr">wheel.passive</span>=<span class="string">&quot;demo&quot;</span> <span class="attr">class</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">			&#125;,</span><br><span class="line">			methods:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">showInfo</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					alert(<span class="string">&#x27;同学你好！&#x27;</span>)</span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(e.target)</span></span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">showMsg</span>(<span class="params">msg</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(msg)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">demo</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">100000</span>; i++) &#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;#&#x27;</span>)</span></span><br><span class="line">					&#125;</span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;累坏了&#x27;</span>)</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="7-3键盘事件"><a href="#7-3键盘事件" class="headerlink" title="7.3键盘事件"></a>7.3键盘事件</h4><p>Visual Studio Code开启按键提示：</p>
<p>F1输入Screencast Mode切换到开发者模式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>键盘事件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				1.Vue中常用的按键别名：</span></span><br><span class="line"><span class="comment">							回车 =&gt; enter</span></span><br><span class="line"><span class="comment">							删除 =&gt; delete (捕获“删除”和“退格”键)</span></span><br><span class="line"><span class="comment">							退出 =&gt; esc</span></span><br><span class="line"><span class="comment">							空格 =&gt; space</span></span><br><span class="line"><span class="comment">							换行 =&gt; tab (特殊，必须配合keydown去使用)</span></span><br><span class="line"><span class="comment">							上 =&gt; up</span></span><br><span class="line"><span class="comment">							下 =&gt; down</span></span><br><span class="line"><span class="comment">							左 =&gt; left</span></span><br><span class="line"><span class="comment">							右 =&gt; right</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta</span></span><br><span class="line"><span class="comment">							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。</span></span><br><span class="line"><span class="comment">							(2).配合keydown使用：正常触发事件。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				4.也可以使用keyCode去指定具体的按键（不推荐）</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>欢迎来到&#123;&#123;name&#125;&#125;学习<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;按下回车提示输入&quot;</span> @<span class="attr">keydown.huiche</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"><span class="javascript">		Vue.config.keyCodes.huiche = <span class="number">13</span> <span class="comment">//定义了一个别名按键</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span></span></span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">showInfo</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="comment">// console.log(e.key,e.keyCode)</span></span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(e.target.value)</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="8-计算属性"><a href="#8-计算属性" class="headerlink" title="8.计算属性"></a>8.计算属性</h3><h4 id="8-1插值法"><a href="#8-1插值法" class="headerlink" title="8.1插值法"></a>8.1插值法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>姓名案例_插值语法实现<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			全名：<span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;firstName&#125;&#125;-&#123;&#123;lastName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				firstName:<span class="string">&#x27;张&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				lastName:<span class="string">&#x27;三&#x27;</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="8-2methods"><a href="#8-2methods" class="headerlink" title="8.2methods"></a>8.2methods</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>姓名案例_methods实现<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			全名：<span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName()&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				firstName:<span class="string">&#x27;张&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				lastName:<span class="string">&#x27;三&#x27;</span></span></span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">fullName</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;@---fullName&#x27;</span>)</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.firstName + <span class="string">&#x27;-&#x27;</span> + <span class="built_in">this</span>.lastName</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="8-3计算属性"><a href="#8-3计算属性" class="headerlink" title="8.3计算属性"></a>8.3计算属性</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>姓名案例_计算属性实现<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			计算属性：</span></span><br><span class="line"><span class="comment">					1.定义：要用的属性不存在，要通过已有属性计算得来。</span></span><br><span class="line"><span class="comment">					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。</span></span><br><span class="line"><span class="comment">					3.get函数什么时候执行？</span></span><br><span class="line"><span class="comment">								(1).初次读取时会执行一次。</span></span><br><span class="line"><span class="comment">								(2).当依赖的数据发生改变时会被再次调用。</span></span><br><span class="line"><span class="comment">					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。</span></span><br><span class="line"><span class="comment">					5.备注：</span></span><br><span class="line"><span class="comment">							1.计算属性最终会出现在vm上，直接读取使用即可。</span></span><br><span class="line"><span class="comment">							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			测试：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;x&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			全名：<span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 全名：&lt;span&gt;&#123;&#123;fullName&#125;&#125;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;</span></span><br><span class="line"><span class="comment">			全名：&lt;span&gt;&#123;&#123;fullName&#125;&#125;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;</span></span><br><span class="line"><span class="comment">			全名：&lt;span&gt;&#123;&#123;fullName&#125;&#125;&lt;/span&gt; --&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				firstName:<span class="string">&#x27;张&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				lastName:<span class="string">&#x27;三&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				x:<span class="string">&#x27;你好&#x27;</span></span></span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">demo</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">					</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line">				fullName:&#123;</span><br><span class="line"><span class="javascript">					<span class="comment">//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;get被调用了&#x27;</span>)</span></span><br><span class="line"><span class="javascript">						<span class="comment">// console.log(this) //此处的this是vm</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">return</span> <span class="built_in">this</span>.firstName + <span class="string">&#x27;-&#x27;</span> + <span class="built_in">this</span>.lastName</span></span><br><span class="line">					&#125;,</span><br><span class="line"><span class="javascript">					<span class="comment">//set什么时候调用? 当fullName被修改时。</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">set</span>(<span class="params">value</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;set&#x27;</span>,value)</span></span><br><span class="line"><span class="javascript">						<span class="keyword">const</span> arr = value.split(<span class="string">&#x27;-&#x27;</span>)</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.firstName = arr[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.lastName = arr[<span class="number">1</span>]</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="8-4计算属性简写"><a href="#8-4计算属性简写" class="headerlink" title="8.4计算属性简写"></a>8.4计算属性简写</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>姓名案例_计算属性实现<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			全名：<span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				firstName:<span class="string">&#x27;张&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				lastName:<span class="string">&#x27;三&#x27;</span>,</span></span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line"><span class="javascript">				<span class="comment">//完整写法</span></span></span><br><span class="line">				/* fullName:&#123;</span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;get被调用了&#x27;</span>)</span></span><br><span class="line"><span class="javascript">						<span class="keyword">return</span> <span class="built_in">this</span>.firstName + <span class="string">&#x27;-&#x27;</span> + <span class="built_in">this</span>.lastName</span></span><br><span class="line">					&#125;,</span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">set</span>(<span class="params">value</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;set&#x27;</span>,value)</span></span><br><span class="line"><span class="javascript">						<span class="keyword">const</span> arr = value.split(<span class="string">&#x27;-&#x27;</span>)</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.firstName = arr[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.lastName = arr[<span class="number">1</span>]</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125; */</span><br><span class="line"><span class="javascript">				<span class="comment">//简写 只使用读取 不适用修改的时候 才可以简写</span></span></span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">fullName</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;get被调用了&#x27;</span>)</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.firstName + <span class="string">&#x27;-&#x27;</span> + <span class="built_in">this</span>.lastName</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="9-监视属性"><a href="#9-监视属性" class="headerlink" title="9.监视属性"></a>9.监视属性</h3><h4 id="9-1普通方法"><a href="#9-1普通方法" class="headerlink" title="9.1普通方法"></a>9.1普通方法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>天气案例<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>今天天气很&#123;&#123;info&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 绑定事件的时候：@xxx=&quot;yyy&quot; yyy可以写一些简单的语句 --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;button @click=&quot;isHot = !isHot&quot;&gt;切换天气&lt;/button&gt; --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeWeather&quot;</span>&gt;</span>切换天气<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				isHot:<span class="literal">true</span>,</span></span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">info</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.isHot ? <span class="string">&#x27;炎热&#x27;</span> : <span class="string">&#x27;凉爽&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">changeWeather</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.isHot = !<span class="built_in">this</span>.isHot</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="9-2监视属性"><a href="#9-2监视属性" class="headerlink" title="9.2监视属性"></a>9.2监视属性</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>天气案例_监视属性<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				监视属性watch：</span></span><br><span class="line"><span class="comment">					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作</span></span><br><span class="line"><span class="comment">					2.监视的属性必须存在，才能进行监视！！</span></span><br><span class="line"><span class="comment">					3.监视的两种写法：</span></span><br><span class="line"><span class="comment">							(1).new Vue时传入watch配置</span></span><br><span class="line"><span class="comment">							(2).通过vm.$watch监视</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>今天天气很&#123;&#123;info&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeWeather&quot;</span>&gt;</span>切换天气<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				isHot:<span class="literal">true</span>,</span></span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">info</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.isHot ? <span class="string">&#x27;炎热&#x27;</span> : <span class="string">&#x27;凉爽&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">changeWeather</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.isHot = !<span class="built_in">this</span>.isHot</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			/* watch:&#123;</span><br><span class="line">				isHot:&#123;</span><br><span class="line"><span class="javascript">					immediate:<span class="literal">true</span>, <span class="comment">//初始化时让handler调用一下</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">//handler什么时候调用？当isHot发生改变时。</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125; */</span><br><span class="line">		&#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">		vm.$watch(<span class="string">&#x27;isHot&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">			immediate:<span class="literal">true</span>, <span class="comment">//初始化时让handler调用一下</span></span></span><br><span class="line"><span class="javascript">			<span class="comment">//handler什么时候调用？当isHot发生改变时。</span></span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue)</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="9-3深度监视"><a href="#9-3深度监视" class="headerlink" title="9.3深度监视"></a>9.3深度监视</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>天气案例_深度监视<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				深度监视：</span></span><br><span class="line"><span class="comment">						(1).Vue中的watch默认不监测对象内部值的改变（一层）。</span></span><br><span class="line"><span class="comment">						(2).配置deep:true可以监测对象内部值改变（多层）。</span></span><br><span class="line"><span class="comment">				备注：</span></span><br><span class="line"><span class="comment">						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！</span></span><br><span class="line"><span class="comment">						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>今天天气很&#123;&#123;info&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeWeather&quot;</span>&gt;</span>切换天气<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">hr</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>a的值是:&#123;&#123;numbers.a&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;numbers.a++&quot;</span>&gt;</span>点我让a+1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>b的值是:&#123;&#123;numbers.b&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;numbers.b++&quot;</span>&gt;</span>点我让b+1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;numbers = &#123;a:666,b:888&#125;&quot;</span>&gt;</span>彻底替换掉numbers<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			&#123;&#123;numbers.c.d.e&#125;&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				isHot:<span class="literal">true</span>,</span></span><br><span class="line">				numbers:&#123;</span><br><span class="line">					a:1,</span><br><span class="line">					b:1,</span><br><span class="line">					c:&#123;</span><br><span class="line">						d:&#123;</span><br><span class="line">							e:100</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">info</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.isHot ? <span class="string">&#x27;炎热&#x27;</span> : <span class="string">&#x27;凉爽&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">changeWeather</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.isHot = !<span class="built_in">this</span>.isHot</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			watch:&#123;</span><br><span class="line">				isHot:&#123;</span><br><span class="line"><span class="javascript">					<span class="comment">// immediate:true, //初始化时让handler调用一下</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">//handler什么时候调用？当isHot发生改变时。</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="comment">//监视多级结构中某个属性的变化</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">/* &#x27;numbers.a&#x27;:&#123;</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">handler</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;a被改变了&#x27;</span>)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125; */</span><br><span class="line"><span class="javascript">				<span class="comment">//监视多级结构中所有属性的变化</span></span></span><br><span class="line">				numbers:&#123;</span><br><span class="line"><span class="javascript">					deep:<span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">handler</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;numbers改变了&#x27;</span>)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="9-4监视简写"><a href="#9-4监视简写" class="headerlink" title="9.4监视简写"></a>9.4监视简写</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>天气案例_监视属性_简写<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>今天天气很&#123;&#123;info&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeWeather&quot;</span>&gt;</span>切换天气<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				isHot:<span class="literal">true</span>,</span></span><br><span class="line">			&#125;,</span><br><span class="line">			computed:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">info</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">return</span> <span class="built_in">this</span>.isHot ? <span class="string">&#x27;炎热&#x27;</span> : <span class="string">&#x27;凉爽&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">changeWeather</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.isHot = !<span class="built_in">this</span>.isHot</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			watch:&#123;</span><br><span class="line"><span class="javascript">				<span class="comment">//正常写法</span></span></span><br><span class="line">				/* isHot:&#123;</span><br><span class="line"><span class="javascript">					<span class="comment">// immediate:true, //初始化时让handler调用一下</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">// deep:true,//深度监视</span></span></span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;, */</span><br><span class="line"><span class="javascript">				<span class="comment">//简写</span></span></span><br><span class="line">				/* isHot(newValue,oldValue)&#123;</span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue,<span class="built_in">this</span>)</span></span><br><span class="line">				&#125; */</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="comment">//正常写法</span></span></span><br><span class="line">		/* vm.$watch(&#x27;isHot&#x27;,&#123;</span><br><span class="line"><span class="javascript">			immediate:<span class="literal">true</span>, <span class="comment">//初始化时让handler调用一下</span></span></span><br><span class="line"><span class="javascript">			deep:<span class="literal">true</span>,<span class="comment">//深度监视</span></span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue)</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;) */</span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="comment">//简写</span></span></span><br><span class="line">		/* vm.$watch(&#x27;isHot&#x27;,(newValue,oldValue)=&gt;&#123;</span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;isHot被修改了&#x27;</span>,newValue,oldValue,<span class="built_in">this</span>)</span></span><br><span class="line">		&#125;) */</span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="9-5姓名案例-watch实现"><a href="#9-5姓名案例-watch实现" class="headerlink" title="9.5姓名案例_watch实现"></a>9.5姓名案例_watch实现</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>姓名案例_watch实现<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				computed和watch之间的区别：</span></span><br><span class="line"><span class="comment">						1.computed能完成的功能，watch都可以完成。</span></span><br><span class="line"><span class="comment">						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。</span></span><br><span class="line"><span class="comment">				两个重要的小原则：</span></span><br><span class="line"><span class="comment">							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。</span></span><br><span class="line"><span class="comment">							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，</span></span><br><span class="line"><span class="comment">								这样this的指向才是vm 或 组件实例对象。</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			全名：<span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				firstName:<span class="string">&#x27;张&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				lastName:<span class="string">&#x27;三&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				fullName:<span class="string">&#x27;张-三&#x27;</span></span></span><br><span class="line">			&#125;,</span><br><span class="line">			watch:&#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">firstName</span>(<span class="params">val</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="built_in">this</span>)</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.fullName = val + <span class="string">&#x27;-&#x27;</span> + <span class="built_in">this</span>.lastName</span></span><br><span class="line">					&#125;,1000);</span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">lastName</span>(<span class="params">val</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.fullName = <span class="built_in">this</span>.firstName + <span class="string">&#x27;-&#x27;</span> + val</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-绑定样式"><a href="#10-绑定样式" class="headerlink" title="10.绑定样式"></a>10.绑定样式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>绑定样式<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">			.basic&#123;</span><br><span class="line"><span class="css">				<span class="attribute">width</span>: <span class="number">400px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">border</span>: <span class="number">1px</span> solid black;</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">			.happy&#123;</span><br><span class="line"><span class="css">				<span class="attribute">border</span>: <span class="number">4px</span> solid red;;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">0</span>, <span class="number">0.644</span>);</span></span><br><span class="line"><span class="css">				<span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">30deg</span>,yellow,pink,orange,yellow);</span></span><br><span class="line">			&#125;</span><br><span class="line">			.sad&#123;</span><br><span class="line"><span class="css">				<span class="attribute">border</span>: <span class="number">4px</span> dashed <span class="built_in">rgb</span>(<span class="number">2</span>, <span class="number">197</span>, <span class="number">2</span>);</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: gray;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.normal&#123;</span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: skyblue;</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			.atguigu1&#123;</span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: yellowgreen;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.atguigu2&#123;</span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-shadow</span>:<span class="number">2px</span> <span class="number">2px</span> <span class="number">10px</span> red;</span></span><br><span class="line">			&#125;</span><br><span class="line">			.atguigu3&#123;</span><br><span class="line"><span class="css">				<span class="attribute">border-radius</span>: <span class="number">20px</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">			绑定样式：</span></span><br><span class="line"><span class="comment">					1. class样式</span></span><br><span class="line"><span class="comment">								写法:class=&quot;xxx&quot; xxx可以是字符串、对象、数组。</span></span><br><span class="line"><span class="comment">										字符串写法适用于：类名不确定，要动态获取。</span></span><br><span class="line"><span class="comment">										对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。</span></span><br><span class="line"><span class="comment">										数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。</span></span><br><span class="line"><span class="comment">					2. style样式</span></span><br><span class="line"><span class="comment">								:style=&quot;&#123;fontSize: xxx&#125;&quot;其中xxx是动态值。</span></span><br><span class="line"><span class="comment">								:style=&quot;[a,b]&quot;其中a、b是样式对象。</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;mood&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeMood&quot;</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;classArr&quot;</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;classObj&quot;</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 绑定style样式--对象写法 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;styleObj&quot;</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 绑定style样式--数组写法 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;styleArr&quot;</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				mood:<span class="string">&#x27;normal&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				classArr:[<span class="string">&#x27;atguigu1&#x27;</span>,<span class="string">&#x27;atguigu2&#x27;</span>,<span class="string">&#x27;atguigu3&#x27;</span>],</span></span><br><span class="line">				classObj:&#123;</span><br><span class="line"><span class="javascript">					atguigu1:<span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">					atguigu2:<span class="literal">false</span>,</span></span><br><span class="line">				&#125;,</span><br><span class="line">				styleObj:&#123;</span><br><span class="line"><span class="javascript">					fontSize: <span class="string">&#x27;40px&#x27;</span>,</span></span><br><span class="line"><span class="javascript">					color:<span class="string">&#x27;red&#x27;</span>,</span></span><br><span class="line">				&#125;,</span><br><span class="line">				styleObj2:&#123;</span><br><span class="line"><span class="javascript">					backgroundColor:<span class="string">&#x27;orange&#x27;</span></span></span><br><span class="line">				&#125;,</span><br><span class="line">				styleArr:[</span><br><span class="line">					&#123;</span><br><span class="line"><span class="javascript">						fontSize: <span class="string">&#x27;40px&#x27;</span>,</span></span><br><span class="line"><span class="javascript">						color:<span class="string">&#x27;blue&#x27;</span>,</span></span><br><span class="line">					&#125;,</span><br><span class="line">					&#123;</span><br><span class="line"><span class="javascript">						backgroundColor:<span class="string">&#x27;gray&#x27;</span></span></span><br><span class="line">					&#125;</span><br><span class="line">				]</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">changeMood</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="keyword">const</span> arr = [<span class="string">&#x27;happy&#x27;</span>,<span class="string">&#x27;sad&#x27;</span>,<span class="string">&#x27;normal&#x27;</span>]</span></span><br><span class="line"><span class="javascript">					<span class="keyword">const</span> index = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*<span class="number">3</span>)</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.mood = arr[index]</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="11-条件渲染"><a href="#11-条件渲染" class="headerlink" title="11.条件渲染"></a>11.条件渲染</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>条件渲染<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				条件渲染：</span></span><br><span class="line"><span class="comment">							1.v-if</span></span><br><span class="line"><span class="comment">										写法：</span></span><br><span class="line"><span class="comment">												(1).v-if=&quot;表达式&quot; </span></span><br><span class="line"><span class="comment">												(2).v-else-if=&quot;表达式&quot;</span></span><br><span class="line"><span class="comment">												(3).v-else=&quot;表达式&quot;</span></span><br><span class="line"><span class="comment">										适用于：切换频率较低的场景。</span></span><br><span class="line"><span class="comment">										特点：不展示的DOM元素直接被移除。</span></span><br><span class="line"><span class="comment">										注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">							2.v-show</span></span><br><span class="line"><span class="comment">										写法：v-show=&quot;表达式&quot;</span></span><br><span class="line"><span class="comment">										适用于：切换频率较高的场景。</span></span><br><span class="line"><span class="comment">										特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉</span></span><br><span class="line"><span class="comment">								</span></span><br><span class="line"><span class="comment">							3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>当前的n值是:&#123;&#123;n&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;n++&quot;</span>&gt;</span>点我n+1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 使用v-show做条件渲染 --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h2 v-show=&quot;false&quot;&gt;欢迎来到&#123;&#123;name&#125;&#125;&lt;/h2&gt; --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h2 v-show=&quot;1 === 1&quot;&gt;欢迎来到&#123;&#123;name&#125;&#125;&lt;/h2&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 使用v-if做条件渲染 --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h2 v-if=&quot;false&quot;&gt;欢迎来到&#123;&#123;name&#125;&#125;&lt;/h2&gt; --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;h2 v-if=&quot;1 === 1&quot;&gt;欢迎来到&#123;&#123;name&#125;&#125;&lt;/h2&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- v-else和v-else-if --&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- &lt;div v-if=&quot;n === 1&quot;&gt;Angular&lt;/div&gt;</span></span><br><span class="line"><span class="comment">			&lt;div v-else-if=&quot;n === 2&quot;&gt;React&lt;/div&gt;</span></span><br><span class="line"><span class="comment">			&lt;div v-else-if=&quot;n === 3&quot;&gt;Vue&lt;/div&gt;</span></span><br><span class="line"><span class="comment">			&lt;div v-else&gt;哈哈&lt;/div&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- v-if与template的配合使用 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">template</span> <span class="attr">v-if</span>=<span class="string">&quot;n === 1&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>你好<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>尚硅谷<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">h2</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line"><span class="javascript">				name:<span class="string">&#x27;尚硅谷&#x27;</span>,</span></span><br><span class="line">				n:0</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="12-列表渲染"><a href="#12-列表渲染" class="headerlink" title="12.列表渲染"></a>12.列表渲染</h3><h4 id="12-1基本列表v-for"><a href="#12-1基本列表v-for" class="headerlink" title="12.1基本列表v-for"></a>12.1基本列表v-for</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>基本列表<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				v-for指令:</span></span><br><span class="line"><span class="comment">						1.用于展示列表数据</span></span><br><span class="line"><span class="comment">						2.语法：v-for=&quot;(item, index) in xxx&quot; :key=&quot;yyy&quot;</span></span><br><span class="line"><span class="comment">						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 遍历数组 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>人员列表（遍历数组）<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(p,index) of persons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;p.name&#125;&#125;-&#123;&#123;p.age&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 遍历对象 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>汽车信息（遍历对象）<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(value,k) of car&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;k&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;k&#125;&#125;-&#123;&#123;value&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 遍历字符串 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>测试遍历字符串（用得少）<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(char,index) of str&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;char&#125;&#125;-&#123;&#123;index&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			</span><br><span class="line">			<span class="comment">&lt;!-- 遍历指定次数 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>测试遍历指定次数（用得少）<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(number,index) of 5&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;index&#125;&#125;-&#123;&#123;number&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">				data:&#123;</span><br><span class="line">					persons:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;张三&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;李四&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;王五&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>&#125;</span></span><br><span class="line">					],</span><br><span class="line">					car:&#123;</span><br><span class="line"><span class="javascript">						name:<span class="string">&#x27;奥迪A8&#x27;</span>,</span></span><br><span class="line"><span class="javascript">						price:<span class="string">&#x27;70万&#x27;</span>,</span></span><br><span class="line"><span class="javascript">						color:<span class="string">&#x27;黑色&#x27;</span></span></span><br><span class="line">					&#125;,</span><br><span class="line"><span class="javascript">					str:<span class="string">&#x27;hello&#x27;</span></span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="12-2key的原理"><a href="#12-2key的原理" class="headerlink" title="12.2key的原理"></a>12.2key的原理</h4><p>shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。</p>
<p>unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>key的原理<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">				面试题：react、vue中的key有什么作用？（key的内部原理）</span></span><br><span class="line"><span class="comment">						</span></span><br><span class="line"><span class="comment">						1. 虚拟DOM中key的作用：</span></span><br><span class="line"><span class="comment">										key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, </span></span><br><span class="line"><span class="comment">										随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：</span></span><br><span class="line"><span class="comment">										</span></span><br><span class="line"><span class="comment">						2.对比规则：</span></span><br><span class="line"><span class="comment">									(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：</span></span><br><span class="line"><span class="comment">												①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！</span></span><br><span class="line"><span class="comment">												②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">									(2).旧虚拟DOM中未找到与新虚拟DOM相同的key</span></span><br><span class="line"><span class="comment">												创建新的真实DOM，随后渲染到到页面。</span></span><br><span class="line"><span class="comment">												</span></span><br><span class="line"><span class="comment">						3. 用index作为key可能会引发的问题：</span></span><br><span class="line"><span class="comment">											1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:</span></span><br><span class="line"><span class="comment">															会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">											2. 如果结构中还包含输入类的DOM：</span></span><br><span class="line"><span class="comment">															会产生错误DOM更新 ==&gt; 界面有问题。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">						4. 开发中如何选择key?:</span></span><br><span class="line"><span class="comment">											1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。</span></span><br><span class="line"><span class="comment">											2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，</span></span><br><span class="line"><span class="comment">												使用index作为key是没有问题的。</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 遍历数组 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>人员列表（遍历数组）<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.once</span>=<span class="string">&quot;add&quot;</span>&gt;</span>添加一个老刘<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(p,index) of persons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;p.name&#125;&#125;-&#123;&#123;p.age&#125;&#125;</span><br><span class="line">					<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">				data:&#123;</span><br><span class="line">					persons:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;张三&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;李四&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;王五&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>&#125;</span></span><br><span class="line">					]</span><br><span class="line">				&#125;,</span><br><span class="line">				methods: &#123;</span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">add</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">const</span> p = &#123;<span class="attr">id</span>:<span class="string">&#x27;004&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;老刘&#x27;</span>,<span class="attr">age</span>:<span class="number">40</span>&#125;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">this</span>.persons.unshift(p)</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;,</span><br><span class="line">			&#125;)</span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="12-3列表过滤"><a href="#12-3列表过滤" class="headerlink" title="12.3列表过滤"></a>12.3列表过滤</h4><p>当computed和watch都可实现的时候优先使用computed</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>列表过滤<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>人员列表<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入名字&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;keyWord&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(p,index) of filPerons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;p.name&#125;&#125;-&#123;&#123;p.age&#125;&#125;-&#123;&#123;p.sex&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="comment">//用watch实现</span></span></span><br><span class="line"><span class="javascript">			<span class="comment">//#region </span></span></span><br><span class="line">			/* new Vue(&#123;</span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">				data:&#123;</span><br><span class="line"><span class="javascript">					keyWord:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line">					persons:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;004&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">22</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;</span></span><br><span class="line">					],</span><br><span class="line">					filPerons:[]</span><br><span class="line">				&#125;,</span><br><span class="line">				watch:&#123;</span><br><span class="line">					keyWord:&#123;</span><br><span class="line"><span class="javascript">						immediate:<span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">						<span class="function"><span class="title">handler</span>(<span class="params">val</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">							<span class="built_in">this</span>.filPerons = <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">								<span class="keyword">return</span> p.name.indexOf(val) !== -<span class="number">1</span></span></span><br><span class="line">							&#125;)</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;) */</span><br><span class="line"><span class="javascript">			<span class="comment">//#endregion</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="comment">//用computed实现</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">				data:&#123;</span><br><span class="line"><span class="javascript">					keyWord:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line">					persons:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;004&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">22</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;</span></span><br><span class="line">					]</span><br><span class="line">				&#125;,</span><br><span class="line">				computed:&#123;</span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">filPerons</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">return</span> <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">return</span> p.name.indexOf(<span class="built_in">this</span>.keyWord) !== -<span class="number">1</span></span></span><br><span class="line">						&#125;)</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;) </span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="12-4列表排序"><a href="#12-4列表排序" class="headerlink" title="12.4列表排序"></a>12.4列表排序</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>列表排序<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>人员列表<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入名字&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;keyWord&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 2&quot;</span>&gt;</span>年龄升序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 1&quot;</span>&gt;</span>年龄降序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 0&quot;</span>&gt;</span>原顺序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(p,index) of filPerons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;p.id&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;p.name&#125;&#125;-&#123;&#123;p.age&#125;&#125;-&#123;&#123;p.sex&#125;&#125;</span><br><span class="line">					<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">			Vue.config.productionTip = <span class="literal">false</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">				data:&#123;</span><br><span class="line"><span class="javascript">					keyWord:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">					sortType:<span class="number">0</span>, <span class="comment">//0原顺序 1降序 2升序</span></span></span><br><span class="line">					persons:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">30</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">31</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">id</span>:<span class="string">&#x27;004&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;</span></span><br><span class="line">					]</span><br><span class="line">				&#125;,</span><br><span class="line">				computed:&#123;</span><br><span class="line"><span class="javascript">					<span class="function"><span class="title">filPerons</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">const</span> arr = <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">return</span> p.name.indexOf(<span class="built_in">this</span>.keyWord) !== -<span class="number">1</span></span></span><br><span class="line">						&#125;)</span><br><span class="line"><span class="javascript">						<span class="comment">//判断一下是否需要排序 如果是0 则为false</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">if</span>(<span class="built_in">this</span>.sortType)&#123;</span></span><br><span class="line"><span class="javascript">							arr.sort(<span class="function">(<span class="params">p1,p2</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">								<span class="keyword">return</span> <span class="built_in">this</span>.sortType === <span class="number">1</span> ? p2.age-p1.age : p1.age-p2.age</span></span><br><span class="line">							&#125;)</span><br><span class="line">						&#125;</span><br><span class="line"><span class="javascript">						<span class="keyword">return</span> arr</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;) </span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="12-5数据检测"><a href="#12-5数据检测" class="headerlink" title="12.5数据检测"></a>12.5数据检测</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>总结数据监视<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">button</span>&#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">margin-top</span>: <span class="number">10px</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;../js/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">			Vue监视数据的原理：</span></span><br><span class="line"><span class="comment">				1. vue会监视data中所有层次的数据。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				2. 如何监测对象中的数据？</span></span><br><span class="line"><span class="comment">								通过setter实现监视，且要在new Vue时就传入要监测的数据。</span></span><br><span class="line"><span class="comment">									(1).对象中后追加的属性，Vue默认不做响应式处理</span></span><br><span class="line"><span class="comment">									(2).如需给后添加的属性做响应式，请使用如下API：</span></span><br><span class="line"><span class="comment">													Vue.set(target，propertyName/index，value) 或 </span></span><br><span class="line"><span class="comment">													vm.$set(target，propertyName/index，value)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				3. 如何监测数组中的数据？</span></span><br><span class="line"><span class="comment">									通过包裹数组更新元素的方法实现，本质就是做了两件事：</span></span><br><span class="line"><span class="comment">										(1).调用原生对应的方法对数组进行更新。</span></span><br><span class="line"><span class="comment">										(2).重新解析模板，进而更新页面。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">				4.在Vue修改数组中的某个元素一定要用如下方法：</span></span><br><span class="line"><span class="comment">							1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()</span></span><br><span class="line"><span class="comment">							2.Vue.set() 或 vm.$set()</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 准备好一个容器--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span>&gt;</span>学生信息<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;student.age++&quot;</span>&gt;</span>年龄+1岁<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSex&quot;</span>&gt;</span>添加性别属性，默认值：男<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;student.sex = &#x27;未知&#x27; &quot;</span>&gt;</span>修改性别<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addFriend&quot;</span>&gt;</span>在列表首位添加一个朋友<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateFirstFriendName&quot;</span>&gt;</span>修改第一个朋友的名字为：张三<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addHobby&quot;</span>&gt;</span>添加一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateHobby&quot;</span>&gt;</span>修改第一个爱好为：开车<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;removeSmoke&quot;</span>&gt;</span>过滤掉爱好中的抽烟<span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名：&#123;&#123;student.name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄：&#123;&#123;student.age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">&quot;student.sex&quot;</span>&gt;</span>性别：&#123;&#123;student.sex&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>爱好：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(h,index) in student.hobby&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;h&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h3</span>&gt;</span>朋友们：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(f,index) in student.friends&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">					&#123;&#123;f.name&#125;&#125;--&#123;&#123;f.age&#125;&#125;</span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span></span><br><span class="line"><span class="javascript">		Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">			el:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line">			data:&#123;</span><br><span class="line">				student:&#123;</span><br><span class="line"><span class="javascript">					name:<span class="string">&#x27;tom&#x27;</span>,</span></span><br><span class="line">					age:18,</span><br><span class="line"><span class="javascript">					hobby:[<span class="string">&#x27;抽烟&#x27;</span>,<span class="string">&#x27;喝酒&#x27;</span>,<span class="string">&#x27;烫头&#x27;</span>],</span></span><br><span class="line">					friends:[</span><br><span class="line"><span class="javascript">						&#123;<span class="attr">name</span>:<span class="string">&#x27;jerry&#x27;</span>,<span class="attr">age</span>:<span class="number">35</span>&#125;,</span></span><br><span class="line"><span class="javascript">						&#123;<span class="attr">name</span>:<span class="string">&#x27;tony&#x27;</span>,<span class="attr">age</span>:<span class="number">36</span>&#125;</span></span><br><span class="line">					]</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">			methods: &#123;</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">addSex</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="comment">// Vue.set(this.student,&#x27;sex&#x27;,&#x27;男&#x27;)</span></span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.$set(<span class="built_in">this</span>.student,<span class="string">&#x27;sex&#x27;</span>,<span class="string">&#x27;男&#x27;</span>)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">addFriend</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.student.friends.unshift(&#123;<span class="attr">name</span>:<span class="string">&#x27;jack&#x27;</span>,<span class="attr">age</span>:<span class="number">70</span>&#125;)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">updateFirstFriendName</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.student.friends[<span class="number">0</span>].name = <span class="string">&#x27;张三&#x27;</span></span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">addHobby</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.student.hobby.push(<span class="string">&#x27;学习&#x27;</span>)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">updateHobby</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="comment">// this.student.hobby.splice(0,1,&#x27;开车&#x27;)</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">// Vue.set(this.student.hobby,0,&#x27;开车&#x27;)</span></span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.$set(<span class="built_in">this</span>.student.hobby,<span class="number">0</span>,<span class="string">&#x27;开车&#x27;</span>)</span></span><br><span class="line">				&#125;,</span><br><span class="line"><span class="javascript">				<span class="function"><span class="title">removeSmoke</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">this</span>.student.hobby = <span class="built_in">this</span>.student.hobby.filter(<span class="function">(<span class="params">h</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">return</span> h !== <span class="string">&#x27;抽烟&#x27;</span></span></span><br><span class="line">					&#125;)</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="13-收集表单"><a href="#13-收集表单" class="headerlink" title="13.收集表单"></a>13.收集表单</h3>
        </div>

        
            <div class="post-copyright-info">
                <div class="article-copyright-info-container">
    <ul>
        <li>本文标题：Vue基础</li>
        <li>本文作者：Carry灭霸</li>
        <li>创建时间：2021-09-01 00:00:00</li>
        <li>
            本文链接：https://carrywl.gitee.io/2021/09/01/Vue/
        </li>
        <li>
            版权声明：本博客所有文章除特别声明外，均采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a> 许可协议。转载请注明出处！
        </li>
    </ul>
</div>

            </div>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/10/08/%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84Blog/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">搭建一个属于自己的Blog</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/08/25/Maven/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Maven</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
            <div class="comment-container">
                <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fas fa-comments">&nbsp;评论</i>
    </div>
    

        
            
    <div class="valine-container">
        <script 
                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
        <div id="vcomments"></div>
        <script >
            function loadValine() {
                new Valine({
                    el: '#vcomments',
                    appId: 'GWXViL9oMzuvk5GoEyorAF5a-gzGzoHsz',
                    appKey: 'tfCnOVhjkUjT90W8EGLYvf0v',
                    meta: ['nick', 'mail', 'link'],
                    avatar: 'wavatar',
                    enableQQ: true,
                    placeholder: '😜 尽情吐槽吧~',
                    lang: 'zh-CN'.toLowerCase()
                });

                function getAuthor(language) {
                    switch (language) {
                        case 'en':
                            return 'Author';
                        case 'zh-CN':
                            return '博主';
                        default:
                            return 'Master';
                    }
                }

                // Add "Author" identify
                const getValineDomTimer = setInterval(() => {
                    const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
                    if (vcards.length > 0) {
                        let author = 'Carry灭霸';

                        if (author) {
                            for (let vcard of vcards) {
                                const vnick_dom = vcard.querySelector('.vhead .vnick');
                                const vnick = vnick_dom.innerHTML;
                                if (vnick === author) {
                                    vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
                                }
                            }
                        }
                        clearInterval(getValineDomTimer);
                    } else {
                        clearInterval(getValineDomTimer);
                    }
                }, 2000);
            }

            if ('false') {
                const loadValineTimeout = setTimeout(() => {
                    loadValine();
                    clearTimeout(loadValineTimeout);
                }, 1000);
            } else {
                window.addEventListener('DOMContentLoaded', loadValine);
            }
        </script>
    </div>



        
    
</div>

            </div>
        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Carry灭霸</a>
        </div>
        
            <script async  src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                
            </div>
        
        <div class="theme-info info-item">
            由 <a target="_blank" href="https://hexo.io">Hexo</a> 驱动&nbsp;|&nbsp;主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fas fa-comment"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue%E5%9F%BA%E7%A1%80"><span class="nav-text">Vue基础</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-hello-world"><span class="nav-text">1.hello world</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="nav-text">2.模板语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="nav-text">3.数据绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E6%8C%82%E8%BD%BD-mount%E5%92%8Cdata%E5%87%BD%E6%95%B0%E5%BC%8F"><span class="nav-text">4.挂载$mount和data函数式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E7%90%86%E8%A7%A3MVVM"><span class="nav-text">5.理解MVVM</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86"><span class="nav-text">6.数据代理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#6-1Object-defineproperty%E6%96%B9%E6%B3%95"><span class="nav-text">6.1Object.defineproperty方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-2%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86"><span class="nav-text">6.2数据代理</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-text">7.事件处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#7-1%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-text">7.1基本使用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#7-2%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="nav-text">7.2事件修饰符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#7-3%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="nav-text">7.3键盘事件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="nav-text">8.计算属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#8-1%E6%8F%92%E5%80%BC%E6%B3%95"><span class="nav-text">8.1插值法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#8-2methods"><span class="nav-text">8.2methods</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#8-3%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="nav-text">8.3计算属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#8-4%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99"><span class="nav-text">8.4计算属性简写</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-%E7%9B%91%E8%A7%86%E5%B1%9E%E6%80%A7"><span class="nav-text">9.监视属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#9-1%E6%99%AE%E9%80%9A%E6%96%B9%E6%B3%95"><span class="nav-text">9.1普通方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#9-2%E7%9B%91%E8%A7%86%E5%B1%9E%E6%80%A7"><span class="nav-text">9.2监视属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#9-3%E6%B7%B1%E5%BA%A6%E7%9B%91%E8%A7%86"><span class="nav-text">9.3深度监视</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#9-4%E7%9B%91%E8%A7%86%E7%AE%80%E5%86%99"><span class="nav-text">9.4监视简写</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#9-5%E5%A7%93%E5%90%8D%E6%A1%88%E4%BE%8B-watch%E5%AE%9E%E7%8E%B0"><span class="nav-text">9.5姓名案例_watch实现</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-%E7%BB%91%E5%AE%9A%E6%A0%B7%E5%BC%8F"><span class="nav-text">10.绑定样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11-%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93"><span class="nav-text">11.条件渲染</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93"><span class="nav-text">12.列表渲染</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#12-1%E5%9F%BA%E6%9C%AC%E5%88%97%E8%A1%A8v-for"><span class="nav-text">12.1基本列表v-for</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#12-2key%E7%9A%84%E5%8E%9F%E7%90%86"><span class="nav-text">12.2key的原理</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#12-3%E5%88%97%E8%A1%A8%E8%BF%87%E6%BB%A4"><span class="nav-text">12.3列表过滤</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#12-4%E5%88%97%E8%A1%A8%E6%8E%92%E5%BA%8F"><span class="nav-text">12.4列表排序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#12-5%E6%95%B0%E6%8D%AE%E6%A3%80%E6%B5%8B"><span class="nav-text">12.5数据检测</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13-%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95"><span class="nav-text">13.收集表单</span></a></li></ol></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/dark-light-toggle.js"></script>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/local-search.js"></script>



    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.3/source/js/toc.js"></script>
    
</div>



</body>
</html>
